<template>
  <div class="report-detail">
    <el-row class="el-row-flex" style="background-color: #ffffff;padding: 20px 20px 0 20px;">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
        <el-form-item label="患者姓名/ID" prop="patientId">
          <PatientInput ref="patientInput" v-model="queryParams.patientId" @update:item="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
            :disabled="!queryParams.patientId">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <EditCardInfo page="RecordReport" :queryParams="queryParams" ref="editCardInfo" class="inner-detail" />
    <!-- <div v-else class="empty-text">暂无数据</div> -->
  </div>
</template>

<script>
import PatientInput from '@/components/PatientInput';
import { getExactType } from '@/utils';
import { cloneDeep } from 'lodash';
import EditCardInfo from './editCardInfo.vue';

const initQueryParams = {
  patientId: '',
}


export default {
  name: "RecordReport",
  components: {
    EditCardInfo,
    PatientInput,
  },
  data() {
    return {
      queryParams: cloneDeep(initQueryParams),
      loading: false,
    };
  },
  filters: {
    getText(value) {
      let type = getExactType(value);
      return ['null', 'undefined'].includes(type) ? '-' : value;
    },
  },
  computed: {
  },
  created() { },
  methods: {
    handleQuery(item) {
      this.$refs.editCardInfo.syncData({ isEdit: false });
      this.$refs.editCardInfo.searchInfo({ queryParams: { patientId: item.id || this.queryParams.patientId }, edit: true });
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.$refs.patientInput.clear()
      Object.assign(this.queryParams, cloneDeep(initQueryParams))
      this.$refs.editCardInfo.syncData({ isOk: false });
    },
  },
};

</script>

<style lang="scss" scoped>
.report-detail {
  padding: 20px;
  background-color: #ECF1FB;
}

.inner-detail {
  min-height: calc(100vh - 170px);
  padding: 0;
  margin-top: 8px;
}
</style>
